<template>
  <div class="home">
     <div class="left">
        <div class="title">
            <div  class="titleItem active">求助详情</div>
        </div>
        <div class="content">
                <el-form :model="state.formObj" :rules="state.rules" ref="ruleForm" label-width="100px" >
                      <el-form-item label="任务详情:" prop="detail">
                        <el-input  type="textarea"  :rows="3" size="small" disabled placeholder="请输入任务详情" style="width: 468px;" v-model="state.formObj.task_content"></el-input>
                      </el-form-item>
                      <el-form-item label="求助内容:" prop="detail">
                        <el-input  type="textarea" :rows="3" size="small" disabled placeholder="请输入公告内容" style="width: 468px;" v-model="state.formObj.question"></el-input>
                      </el-form-item>
                      <el-form-item label="回复内容:" prop="answer">
                        <el-input  type="textarea" :rows="3" size="small" placeholder="请输入回复内容" style="width: 468px;" v-model="state.formObj.answer"></el-input>
                      </el-form-item>
                      <el-form-item label="附件:">
                           <upload-file ref="uploadFile" :fileList="state.fileList"></upload-file>
                          <!-- <el-dialog v-model="state.dialogVisible">
                            <img width="100%" :src="state.dialogImageUrl" alt="">
                          </el-dialog> -->

                      </el-form-item>

                </el-form>
                <div style="margin-top: 45px;margin-bottom: 10px; display: flex; justify-content: center;">
                   <el-button  size="small" style="margin-right: 24px;" type="primary" @click="commit">发布</el-button>
                   <el-button  size="small" @click="cancel">取消</el-button>
                </div>
        </div>
     </div>

  </div>
</template>
<script>
// vue3 弃用了beforeCreate created
import {getCurrentInstance,ref,reactive,onMounted,onUpdated,onUnmounted} from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import uploadFile from '@/components/uploadFile/uploadFile'
import wordIcon from '@/assets/img/word.png'
import pdfIcon from '@/assets/img/pdf.png'
import fileIcon from '@/assets/img/file.png'
import imageIcon from '@/assets/img/image.png'
import videoIcon from '@/assets/img/video.png'
import zipIcon from '@/assets/img/zip.png'
const state = reactive({
  wordIcon,
  pdfIcon,
  fileIcon,
  imageIcon,
  videoIcon,
  zipIcon,
  isHelp: false,
  activeTab : 1,
  formObj : {
    detail : '',
    content : '',
    answer : '',
    about_file : '',
  },
  fileList:[],
  rules:{
    answer: [
          { required: true, message: '请输入回复内容', trigger: 'blur' }
        ],
  }

  ,
  dialogImageUrl: '',
  dialogVisible: false,
  disabled: false,
});
function handleRemove(file) {
        console.log(file);
};
function handlePictureCardPreview(file) {
        state.dialogImageUrl = file.url;
        state.dialogVisible = true;
};
function handleDownload(file) {
        console.log(file);
};

export default {
  name: 'taskSeekHelpDetail',
  components: {uploadFile},
  // setup(props,ctx){
  setup(props,{emit}){
    const ctx = getCurrentInstance();
    const router = useRouter();
    const store = useStore()
    function cancel(){
        closeCurrentPage()
    };
    function closeCurrentPage(){
        let title = router.currentRoute.value.meta.title
        let index = store.state.contentTabs.findIndex((item)=>{
            console.log();
            return item.title==title
        })
        store.state.contentTabs.splice(index,1)
        router.go(-1)
    };
    function getHelpDetail(_id){
        ctx.$request({
            url: "?s=Learn.Task.HelpTaskRow",
            params: {
              help_id: _id,
            },
          })
          .then(res=>{
              console.log(res);
              if(res.ret===200){
                Object.assign( state.formObj, res.data)
                res.data.about_file.length ?  state.fileList =  res.data.about_file : ''
                if(state.fileList.length){
                  state.fileList.forEach((item)=>{
                    item.downloadUrl = item.url
                    item.name = item.title
                    if (item.imagetype=='.docx') {
                      item.url = state.wordIcon
                    }else if(item.imagetype=='.pdf'){
                      item.url = state.pdfIcon
                    }else if(item.imagetype=='.file'){
                      item.url = state.fileIcon
                    }else if(item.imagetype=='.img'){
                      item.url = state.imageIcon
                    }else if(item.imagetype=='.video'){
                      item.url = state.videoIcon
                    }else if(item.imagetype=='.zip'){
                      item.url = state.zipIcon
                    }
                  })
                }

              }else{
                ctx.$message.error('获取数据失败。')
              }

          });
    };
    function commit(){
       ctx.$refs.ruleForm.validate((valid) => {
                if (valid) {
                  state.formObj.about_file = ctx.$refs.uploadFile.state.files

                  ctx.$request({
                    url: "?s=Learn.Task.StaHelpTask",
                    params: {
                      help_id: router.currentRoute.value.query.id,
                      answer: state.formObj.answer,
                      about_file : state.formObj.about_file
                    },
                  })
                  .then(res=>{
                      console.log(res);
                      if(res.ret===200){
                        ctx.$message.success('发布成功。')
                        closeCurrentPage()
                      }else{
                        ctx.$message.error('发布失败。')
                      }
                  });

                } else {
                  ctx.$message.error('请先填写表单信息！')
                  return false;
                }
       });



    };
    onMounted(()=>{
      // 获取当前路由实例参数
      console.dir(router.currentRoute.value.query.id);
      let id = router.currentRoute.value.query.id
      getHelpDetail(id);
    });

    return{
      state,
      handleRemove,
      handlePictureCardPreview,
      handleDownload,
      cancel,
      commit
    }
  }
}
</script>
<style lang="scss" scoped>


.home {
  display: flex;
  width: 100%;
  // height:  calc(calc(100vh - 64px) - 40px - 70px);
   .left {
      flex: 2;
      background-color: #fff;
      height: 100%;
      margin-right: 24px;
      .title {
        display: flex;
        border-bottom: 1px solid #E9E9E9;
        box-sizing: border-box;
        align-items: center;
        height: 55px;
          .active{
            // border-bottom: 2px solid #1890FFFF;
            color: #1890FFFF !important;
            position: relative;
          }
          .active:after{
            content:'';
            position: absolute;
            bottom: -102%;
            left: 0%;
            height: 2px;
            width: 50px;
            background-color: #1890FFFF;
          }
          .titleItem {
            margin-left: 32px;
            font-size: 16px;
            font-weight: 600;
            color: #888888FF;
            cursor: pointer;
          }
      }

      .content{
        margin-top: 22px;
        display: grid;
        place-items: center;
      }

   }
}
</style>
